<template>
    <div class="songcontent" @click="xztcx===false?tz=!tz:tz">
        <div class="center">
            <div class="bigimg" v-show="!tz">
                <img v-lazy="tupian" alt="">
            </div>
            <div class="dang" v-show="tz"
                ref="dang"
                @touchstart="anxiale"
                @touchmove="huadong"
                @touchend="qilai"
            >   
            
                <div class="youbiansanjiao" v-show="xztcx" @click="tiaojindu">
                    <div class="xian"></div>
                    <div class="sanjiao"></div>
                </div>
                <ul class="geci"  
                :style="`transform:translateY(${changegao}px);transition:${ishua==true?'none':' all 0.2s'};}`" 
                ref="gc">
                    <li
                     v-for="(item, index) in songgc"
                     v-bind:key="item.id"
                     v-bind:class="indexgai == index ? 'songactive' : ''"
                     v-html="item.gc"
                    ></li>
                </ul>
            </div>
        </div>
         <!-- @click="tiaojindu" -->
    </div>
</template>
<script>
// bf(id,url,alltime,nowtime)
export default {
    name:"songcontent",
    props:['tupian','songgc','num'],
    data(){
        return {
            tz:false,
            gao:30,
            changegao:0,
            indexgai:0,
            xztcx:false,
            ishua:false,
            tim:null,
            timer:null,
            gbqian:0,
            anxia:0,
            xz:0,
            min:0,
            max:0,

            pdsj:null,
        }
    },
    created(){
        document.oncontextmenu = ()=> {return false}
        this.gaibian()
    },
    watch:{
        // 'num':{
        //     immediate: true,
        //     handler(value){
        //         if(value >= 0 && this.ishua == false && this.tim == null){
        //             // console.log(1234567890)
        //             this.changegao = -value * this.gao + 150
        //             // console.log(this.changegao)
        //             this.indexgai = value
        //             if(this.$refs.gc !== undefined){
        //                 this.gao = this.$refs.gc.offsetHeight/(this.songgc.length)
        //                 this.zonggao = this.$refs.gc.offsetHeight
        //                 // this.danggao = this.$refs.dang.offsetTop
        //             }
        //         }
        //     }
        // },
        'songgc':{
            handler(){
                clearInterval(this.pdsj)
                this.pdsj = null
                this.gaibian()
            }
        },
        // "$store.state.nowtime":{
        //     handler(value){
        //         // this.now = value
        //         // this.chuli(value)
        //         // console.log(this.$store.state.nowtime)
        //     },
        //     immediate: true,
        // },
        // 'changegao':{
        //     handler(value){
        //         console.log(value)
        //     }
        // }
    },
    methods:{
        // 判断当前的数据在那句歌词处
        gaibian(){
            this.pdsj = setInterval(()=>{
                let index = 0;
                for (let i = 0; i < this.songgc.length; i++) {
                    if(this.$store.state.nowtime !== undefined){
                        if (this.$store.state.nowtime > this.songgc[i].time && i+1 == this.songgc.length) {
                            // console.log("最后")
                            index = i;
                            break;
                        }else{
                            if (this.$store.state.nowtime > this.songgc[i].time && this.$store.state.nowtime < this.songgc[i + 1].time &&this.songgc[i + 1].time !== undefined) {
                                // console.log("还没")
                                index = i;
                                break;
                            }
                        }
                    }
                }
                this.sepanduan(index)
            },500)
        },
        // 判断
        sepanduan(value){
            if(value >= 0 && this.ishua == false && this.tim == null){
                this.changegao = -value * this.gao + 150
                this.indexgai = value
                if(this.$refs.gc !== undefined){
                    this.gao = this.$refs.gc.offsetHeight/(this.songgc.length)
                    this.zonggao = this.$refs.gc.offsetHeight
                }
            }
        },
        anxiale(event){
            // console.log("按下了")changegao
            // this.timer = setTimeout(()=>{
                this.gbqian = this.changegao
                this.ishua = true
                this.anxia = event.touches[0].pageY;
                // console.log(this.anxia,this.gbqian)
                this.max = -this.$refs.gc.offsetHeight+150
                this.min = 150
                clearTimeout(this.tim)
                this.tim = null
                // console.log(this.$refs.gc.offsetHeight)
            // },500)
        },
        huadong(event){
            this.ishua = true
            if(this.ishua){
                // 查看上面的数据
                this.xztcx = true
                if(event.touches[0].pageY - this.anxia > 0){
                    this.changegao = (event.touches[0].pageY - this.anxia) + this.gbqian;
                    // 最上
                    if(this.changegao < this.max ){
                        this.changegao = this.max;
                    }
                    // 最下
                    if(this.changegao > this.min ){
                        this.changegao = this.min ;
                    }
                    this.indexgai = Math.round((-this.changegao+150)/this.gao)
                }
                // 下调
                else{
                    this.changegao = -(this.anxia - event.touches[0].pageY) + this.gbqian
                    // 最上
                    if(this.changegao < this.max ){
                        this.changegao = this.max;
                    }
                    // 最下
                    if(this.changegao > this.min ){
                        this.changegao = this.min ;
                    }
                    this.indexgai = Math.round((-this.changegao+150)/this.gao)
                }
            }
        },
        qilai(){
            this.tim = setTimeout(()=>{
                // console.log("起来了")
                this.ishua = false
                this.xztcx = false
                clearTimeout(this.tim)
                this.tim = null
            },1000)
        },
        tiaojindu(){
            // console.log("改变")
            let sj = this.songgc[this.indexgai].time
            this.ishua = false
            this.changegao = -this.indexgai * this.gao +150
            this.tim = setTimeout(()=>{
                this.xztcx = false
                clearTimeout(this.tim)
                this.tim = null
                this.$store.commit("changechange",false)
            },500)
            this.$store.commit("changechange",true)
            this.$store.commit("changenowtime",sj)
        }
    }
}
</script>
<style lang="less" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.songcontent{
    margin-top: 10%;
    padding-top: 1px;
    box-sizing: border-box;
    width: 100%;
    height: 67.5%;
}
.center{
    height:100%;
    padding-top: 1px;
    box-sizing: border-box;
    .bigimg{
        width: 60%;
        margin: 0 auto;
        margin-top: 100px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid white;
        animation: zhuandong 20s linear infinite;
        img{
            width: 100%;
        }
    }
}
.dang{
    height: 75%;
    overflow: hidden;
    margin-top: 60px;
}
.geci{
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select:none; 
    user-select:none; 
    width: 100%;
    text-align: center;
    // margin: 0 auto;
    // margin-top: 100px;
    font-size: 0px;
    overflow: hidden;
    // transition: all 0.2s;
    li{
        color: white;
        padding: 5px;
        font-size: 16px;
        transition: all 0.5s;
        line-height: 20px;
    }
    .songactive{
        font-size: 20px;
        color: #83aadf;
    }
}
.youbiansanjiao{
    width: 100%;
    height: 30px;
    position: absolute;
    top: 39%;
    right: 0px;
    z-index:100;
    // background-color: yellow;
    .xian{
        width: 80%;
        height: 2px;
        margin: 0 auto;
        background-color: #dddddd4d;
        margin-top:15px;
    }
    .sanjiao{
        margin-top: -12.5px;
        margin-left: 10px;
        border: 10px solid transparent;
        width: 0px;
        height: 0px;
        border-left: 10px solid #dddddd4d;
    }
}
</style>
<style>
@keyframes zhuandong{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>